<!DOCTYPE html>
<!--
  ~ Copyright (C) 2018 guomw.Inc. All rights reserved.
  ~ 项目名称： mysite
  ~ 文件名称： main.html
  ~ Date：18-9-6 下午4:09
  ~ Author: guomw
  -->

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <!--<title th:text="${config.websiteTitle}">Title</title>-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="shortcut icon" href="../resource/favicon.ico" th:href="@{/resource/favicon.ico}"/>
    <link href="../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../resource/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"
          th:href="@{/resource/css/font-awesome.min.css?v=4.4.0}"/>
    <link href="../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../resource/css/style.min.css?v=4.0.0" rel="stylesheet"
          th:href="@{/resource/css/style.min.css?v=4.0.0}"/>
    <link href="../resource/css/style-diy.css?v=4.0.0" rel="stylesheet"
          th:href="@{/resource/css/style-diy.css?v=4.0.1}"/>

    <style>
        .popup {
            box-sizing: border-box;
            width: 670px;
            background: #FFF1F0;
            border: 1px solid #FFA39E;
            text-align: center;
            padding: 15px 10px 35px 10px;
            border-radius: 8px;
            box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.2);
        }

        .popup__title {
            font-size: 20px;
            font-weight: 600;
            color: #111;
            margin-bottom: 10px;
        }

        .img {
            width: 70px;
            height: 70px;
            vertical-align: middle;
            margin: 20px;
        }

        .popup__btnWrapper {
            width: 50%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .popup__text {
            font-size: 20px;
            margin-bottom: 40px;
            font-weight: normal;
            color: #555;
        }

        .popup_button {
            width: 154px;
            cursor: pointer;
            border-radius: 4px;
            line-height: 45px;

            font-size: 18px;
        }

        .popup__yesBtn {
            color: #fff;
            background-color: #F5222D;
            border: 1px solid #F5222D;
        }

        .popup__noBtn {
            background-color: #fff;
            border: 1px solid #eee;
        }
    </style>
</head>


<body class="gray-bg top-navigation">
<script type="text/html" id="li_template">
    <li class="dropdown">
        <a aria-expanded="false" role="button" {href} class="dropdown-toggle J_menuItem" data-toggle="dropdown">
            {iconClsDom} <span class="nav-label">{itemName}</span>
            {arrow}</a>
        {ul_template}
    </li>
</script>
<!--左侧菜单ul元素模板-->
<script type="text/html" id="ul_template">
    <ul role="menu" class="nav navbar-nav dropdown-menu {nav-child}">
        {li_template}
    </ul>
</script>
<div id="wrapper" style="height: 100%">
    <div id="page-wrapper" class="gray-bg" style="height: 100%">
        <div class="row border-bottom white-bg">
            <nav class="navbar navbar-static-top" role="navigation">
                <div class="navbar-header" style="width: auto">
                    <button aria-controls="navbar" aria-expanded="false" data-target="#navbar"
                            data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                        <i class="fa fa-reorder"></i>
                    </button>
                    <a aria-expanded="false" role="button" href="/desktop" class="navbar-brand J_menuItem"
                       data-toggle="dropdown" data-index="0">
                        <img src="../resource/img/dddlogo.jpg" th:src="@{/resource/img/dddlogo.jpg}"
                             style="position: absolute;top: 0px;height: 48px;">
                        <span class="nav-label" style="display: none;">颐和苑</span>
                    </a>
                </div>
                <div class="navbar-collapse collapse navbar-right">
                    <ul class="nav navbar-nav">
                        <li class="dropdown" id="parent-ui">
                            <a aria-expanded="false" role="button" href="#" class="dropdown-toggle"
                               data-toggle="dropdown">菜单列表<span class="caret"></span></a>
                            <ul role="menu" class="dropdown-menu" id="menus_items">

                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-top-links navbar-right">
                        <li>
                            <a href="logout">
                                <i class="fa fa-sign-out"></i> 退出
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        <div id="alarm_content">

        </div>


        <div class="wrapper wrapper-content" style="height: 92%;padding: 0px;position: relative; z-index: 1">
            <div class="row J_mainContent" id="content-main" style="height: 100% !important;">
                <iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="/desktop"
                        th:src="@{/desktop}" frameborder="0" data-id="/desktop" seamless></iframe>
            </div>
        </div>

        <div class="footer">
            <div style="text-align:center">
                <a>上海简识电子科技有限公司</a>
                &copy; 2019-2020 <a>颐和苑</a>
            </div>

        </div>
    </div>
</div>

<!--右侧部分结束-->

<script type="text/html" id="alarm_content_temp">
    <div style="padding: 20px;">
        <input type="hidden" id="alarm_{{userId}}" value="{{userId}}"/>
        用户{{userName}}发出报警
    </div>
</script>
<script type="text/html" id="alarm_prop">
    <div id="alarm_prop_{{userId}}" class="popup" style="position: absolute;top: 20%;left: 28%">
        <img class="img" src="../resource/img/jg.png" th:src="@{/resource/img/jg.png}">
        <div class="popup__title">{{alarmType}} 警报</div>
        <div class="popup__text">用户 "{{name}}"（{{roomNo}}） 发出警告!</div>
        <div class="popup__text">{{alarmTemplate}}</div>
        <div class="popup__btnWrapper">
            <button class="popup__yesBtn popup_button" onclick="propCheck({{userId}},'{{name}}')">定位</button>
            <button class="popup__noBtn popup_button" onclick="cancelProp({{userId}})">取消</button>
        </div>
    </div>
</script>

<script src="../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../resource/js/plugins/metisMenu/jquery.metisMenu.js"
        th:src="@{/resource/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script src="../resource/js/plugins/slimscroll/jquery.slimscroll.min.js"
        th:src="@{/resource/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
<script src="../resource/js/plugins/layer/layer.min.js" th:src="@{/resource/js/plugins/layer/layer.min.js}">
</script>
<script src="../resource/js/hplus.min.js?v=4.0.0" th:src="@{/resource/js/hplus.min.js?v=4.0.0}"></script>
<script type="text/javascript" src="../resource/js/contabs.min.js?1234"
        th:src="@{/resource/js/contabs.min.js?1234}"></script>
<script src="../resource/js/plugins/pace/pace.min.js" th:src="@{/resource/js/plugins/pace/pace.min.js}"></script>
<script src="../resource/js/plugins/hot/Jquery.util.js" th:src="@{/resource/js/plugins/hot/Jquery.util.js}">
</script>
<script src="../resource/hotui/js/hot/bootstrap.hot.extra-init.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js}"></script>
<script src="../resource/hotui/js/hot/bootstrap.hot.extra-utils.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js?1234}"></script>
<script src="../resource/js/views/main.js?123" th:src="@{/resource/js/views/mainTest.js?123}"></script>
<script src="../resource/js/sockjs.min.js"></script>
<script src="../resource/js/stomp.min.js"></script>

<script type="text/javascript" th:inline="javascript">
    var toneSrc = /*[[@{/resource/tone/5c8902563671136874.mp3}]]*/ "../resource/tone/5c8902563671136874.mp3";
</script>

<script type="text/javascript">
    function playAudio() {
        $('audio').remove();
        let $audio = $('<audio style="display: none;" src="' + toneSrc + '" id="tone" loop="loop"></audio>');
        $('body').append($audio);
        let audio = document.getElementById('tone');
        audio.play();

        // var audioElementHovertree = document.createElement('audio');
        // audioElementHovertree.setAttribute('src', toneSrc);
        // // audioElementHovertree.setAttribute('autoplay', 'autoplay'); //打开自动播放
        // audioElementHovertree.setAttribute('id', 'tone');
        // audioElementHovertree.setAttribute('loop', 'loop');
        // audioElementHovertree.play();
    }

    function stopAudio() {
        $('audio').remove();
    }

    function showProp(userId, name, alarmType, alarmTemplate, roomNo) {
        if ($("#alarm_prop_" + userId).length > 0) {
            return;
        }

        let preTime = localStorage.getItem('alarm_user_' + userId);
        let nowTime = new Date().getTime();
        console.log('pre=' + preTime + ", now: " + nowTime);
        let duration = nowTime - preTime;
        console.log(duration);
        //1000 * 60
        if (preTime === null || duration > 1000 * 90) {
            //设置弹框的时间，一分钟以内不再弹框
            localStorage.setItem('alarm_user_' + userId, new Date().getTime());

            playAudio();

            let propHtml = $("#alarm_prop").html();
            propHtml = propHtml.replace(/{{userId}}/g, userId);
            propHtml = propHtml.replace(/{{name}}/g, name);
            propHtml = propHtml.replace('{{alarmType}}', alarmType);
            propHtml = propHtml.replace('{{alarmTemplate}}', alarmTemplate);
            propHtml = propHtml.replace('{{roomNo}}', roomNo);

            $("#alarm_content").append(propHtml);
        }
    }

    function cancelProp(userId) {
        stopAudio();
        //设置关闭的时间
        // localStorage.setItem('alar_user_' + userId, new Date().getTime());
        $("#alarm_prop_" + userId).remove();
    }

    function propCheck(userId, name) {
        let url = "/map?userId=" + userId;
        // window.location.href = url;
        cancelProp(userId);
        stopAudio();
        newTab(url, "用户" + name + "的位置");
    }

    function newTab(url, name) {
        var index = false;
        $(".page-tabs-content .J_menuTab").each(function () {
            var dataId = $(this).attr("data-id");
            if (dataId == url) {
                index = true;
                $(this).click();
                var loado = layer.load();
                var jiframe = $('.J_iframe[data-id="' + url + '"]');
                jiframe.attr("src", jiframe.attr("src"));
                jiframe.load(function () {
                    layer.close(loado);
                });
                return false;
            }
        });
        if (!index) {
            $(".J_menuTab").removeClass("active");
            var r = '<iframe class="J_iframe" width="100%" height="100%" src="' + url +
                '" frameborder="0" data-id="' + url + '" seamless></iframe>';
            $(".J_mainContent").find("iframe.J_iframe").hide().parents(".J_mainContent").append(r);
            var o = layer.load();
            $(".J_mainContent iframe:visible").load(function () {
                layer.close(o)
            });
        }
    }

    var ws;
    var client;
    $(function () {
        ws = new SockJS("/websocket/notification");
        client = Stomp.over(ws);
        client.connect({}, function (frame) {
            client.subscribe('/topic/' + "alarm", function (message) {
                var msgBody = JSON.parse(message.body);

                let alarmCount = $("#alarm_" + msgBody.userId).length;
                if (alarmCount > 0) {
                    return;
                }

                showProp(msgBody.userId, msgBody.realName, msgBody.alarmTypeDesc, msgBody.alarmTemplate, msgBody.roomNo);
            });
        });
    });
    setTimeout(function () {
        $("#menus_items").children().children().click(
            function () {
                if ($(this).attr("href") != undefined) {
                    $("#parent-ui").removeClass("open")
                }
            }
        );
        $("#menus_items").children().children().children().children().click(
            function () {
                $(this).parent().parent().removeClass("in");
                $("#parent-ui").removeClass("open");
            }
        )
    }, 1000)


</script>
</div>
</body>

</html>